<template>
  <!-- :style="`width:${width}px;`"  -->
  <div class="navbar-menu-body uni-scroll" :style="`width: calc(calc(100vw - 40px) / 6 * ${lineSize})`">
    <div class="navbar-menu-search" v-if="search">
      <el-input placeholder="搜索功能" v-model="menuName" class="input-with-select">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <div class="navbar-menu">
      <!-- 横向排列 -->
      <template v-if="layoutX">
        <el-row v-for="(menuGroup,key) in menusGroup" :key="key" :gutter="30">
          <el-col :span="span" v-for="menus in menuGroup" :key="menus.id">
            <div class="aa">
              <div class="a">
                <div class="navbar-menu-title" v-html="menus.name">
                </div>
              </div>
              <ul class="navbar-menu-item" style="list-style:none; margin:0px">
                <li v-for="menu in menus.children" :key="menu.id">
                  <svg v-if="ico" class="icon-svg" style="font-size: 16px;margin-bottom: 2px;margin-right: 10px;" aria-hidden="true" slot="reference">
                    <use :xlink:href="`#${menu.icon}`"></use>
                  </svg>
                  <el-button type="text" @click="gotoRouteHandle(menu.id)" v-html="menu.name">
                  </el-button>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <div v-if="!menusGroup.length" class="no-data">暂无数据</div>
      </template>
      <!-- 纵向排列 -->
      <template v-else>
        <el-row :gutter="30">
          <el-col :span="span" v-for="(menuGroup,key) in menusGroupY" :key="key">
            <el-row v-for="menus in menuGroup" :key="menus.id">
              <el-col :span="24">
                <div class="aa">
                  <div class="a">
                    <div class="navbar-menu-title" v-html="menus.name">
                    </div>
                  </div>
                  <ul class="navbar-menu-item" style="list-style:none; margin:0px">
                    <li v-for="menu in menus.children" :key="menu.id">
                      <svg v-if="ico" class="icon-svg" style="font-size: 16px;margin-bottom: 2px;margin-right: 10px;" aria-hidden="true" slot="reference">
                        <use :xlink:href="`#${menu.icon}`"></use>
                      </svg>
                      <el-button type="text" @click="gotoRouteHandle(menu)" v-html="menu.name">
                      </el-button>
                    </li>
                  </ul>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <div v-if="!menusGroup.length" class="no-data">暂无数据</div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 菜单参数
    data: {
      type: Array,
      default () {
        return []
      }
    },
    // X布局
    layoutX: {
      type: Boolean,
      default () {
        return false
      }
    },
    ico: {
      type: Boolean,
      default () {
        return true
      }
    },
    // 列宽，默认按照行数进行计算
    windowWidth: {
      type: Number,
      default () {
        return 0
      }
    },
    // 行数，默认按照菜单数量进行计算
    listLine: {
      type: Number,
      default () {
        return 0
      }
    },
    // 搜索按钮
    search: {
      type: Boolean,
      default () {
        return true
      }
    },
    // 模块名称
    modelName: {
      type: Boolean,
      default () {
        return true
      }
    }
  },
  data () {
    return {
      menuName: '',
      // lineSize: 6,
      isInit: false,
      span: 0,
      width: 0,
      lineSize: 0,
      lineWidth: 190
      // clientWidth: ''
      // show: true
    }
  },
  mounted () {
    // 获取浏览器可视区域宽
    // this.clientWidth = `${document.documentElement.clientWidth}`
  },
  watch: {
    // clientWidth2: function () {
    //   this.changeFixed(this.clientWidth2)
    // }
  },
  created () {
    // this.width = this.lineSize * 185
  },
  computed: {
    // clientWidth2: function () {
    //   let Width = document.documentElement.clientWidth
    //   return Width
    // },
    // 计算菜单
    menusGroup: function () {
      // 菜单转换
      let menus = this.getMenu(this.data)
      // 菜单过滤
      menus = this.queryMenu(this.menuName, menus)
      // 弹窗初始化
      this.lineInit(menus.length)
      // 菜单分组
      let menuGroups = this.getMenuGroupX(menus)
      // console.log('menusGroup', JSON.stringify(menuGroups))
      return menuGroups
    },
    menusGroupY: function () {
      // console.log('data', JSON.stringify(this.data))
      // 菜单转换
      let menus = this.getMenu(this.data)
      // 菜单过滤
      menus = this.queryMenu(this.menuName, menus)
      // 弹窗初始化
      this.lineInit(menus.length)
      // 菜单分组
      let menuGroups = this.getMenuGroupY(menus)
      // console.log(JSON.stringify(menuGroups))
      // console.log(JSON.stringify(this.menusGroup))
      return menuGroups
    }
  },
  methods: {
    changeFixed (clientHeight) {
      console.log('clientHeight', clientHeight)
    },
    // 列计算
    lineInit (size) {
      if (this.isInit) {
        // 已经初始化不在重新计算
        return
      }
      if (!this.listLine) {
        // 计算列数
        if (!size) {
          // 没有菜单时
          this.lineSize = 2
        } else if (size < 4) {
          // 菜单数小于4
          this.lineSize = size
        } else if (size <= 12) {
          // 菜单数小于12
          this.lineSize = 4
        } else {
          this.lineSize = 6
        }
      } else {
        this.lineSize = this.listLine
      }
      // this.lineSize = 5

      if (!this.windowWidth) {
        // 计算宽度
        // this.width = this.lineSize * 234
        // this.width = this.lineSize * 280
        // this.width = this.lineSize * 185
        // this.width = this.lineSize * 220
        this.width = this.lineSize * this.lineWidth
      } else {
        this.width = this.windowWidth
      }

      this.span = parseInt(24 / this.lineSize)
      this.isInit = true
      // this.show = true
    },
    // 获取菜单
    getMenu (data) {
      // 临时菜单集合
      let tempMenus = []
      // 遍历所有菜单
      data.forEach(item => {
        // 处理菜单数据
        let menu = this.menuList(item, '', 0)
        if (menu.length) {
          tempMenus = tempMenus.concat(menu)
        }
      })
      return tempMenus
    },
    /**
     * 菜单转换
     */
    menuList (data, modelName, modelId) {
      // console.log(1)
      let menus = []
      if (data.showFlag === 0) {
        // 当前菜单是隐藏菜单,不处理
        return menus
      }
      let menu = {}
      if (data.type === 2) {
        // 模块
        if (!data.children) {
          // 如果模块下没有数据，不处理
          return
        }
        let tempMenus = []
        // 处理没有目录的情况
        data.children.forEach(item => {
          if (item.type === 0) {
            // console.log('1', item)
            let childrenMenu = this.menuList(item, '', data.id)
            if (childrenMenu.length) {
              tempMenus = tempMenus.concat(childrenMenu)
            }
          }
        })
        if (tempMenus.length) {
          menu.id = data.id
          menu.name = data.name
          menu.icon = data.icon
          menu.children = tempMenus
          menu.modelId = modelId
          // console.log('1', menu)
          menus = menus.concat(menu)
        }
        // 处理目录
        data.children.forEach(item => {
          if (item.type !== 0) {
            // 处理子目录
            let childrenMenu = this.menuList(item, data.name, data.id)
            if (childrenMenu.length) {
              menus = menus.concat(childrenMenu)
            }
          }
        })
      } else {
        // 目录或菜单
        menu.id = data.id
        let name = ''
        if (this.modelName && modelName) {
          name = modelName + ' - '
        }
        menu.name = name + data.name
        menu.icon = data.icon
        menu.modelId = modelId
        menu.children = []
        if (data.children) {
          // 如果有子菜单继续处理
          data.children.forEach(item => {
            let childrenMenu = this.menuList(item, '', modelId)
            if (childrenMenu.length) {
              menu.children = menu.children.concat(childrenMenu)
            }
          })
        }
        menus.push(menu)
      }
      return menus
    },
    // 将数据按行进行分组
    getMenuGroupX (tempMenus) {
      let menus = []
      let tempMenus2 = []
      tempMenus.forEach(item => {
        tempMenus2.push(item)
        // 处理菜单数据
        if (tempMenus2.length >= this.lineSize) {
          // 每4组菜单放到一个集合
          menus.push(tempMenus2)
          tempMenus2 = []
        }
      })

      if (tempMenus2.length && tempMenus2.length < this.lineSize) {
        // 将剩余菜单添加到集合
        menus.push(tempMenus2)
      }
      return menus
    },
    // 将数据按行进行分组
    getMenuGroupY (tempMenus) {
      // let menus = []
      let tempMenus2 = new Array(this.lineSize)
      for (let index = 0; index < tempMenus.length; index++) {
        let element = tempMenus[index]
        let tempIndex = index % this.lineSize
        // 初始化数组
        if (!tempMenus2[tempIndex]) {
          tempMenus2[tempIndex] = []
        }
        tempMenus2[tempIndex].push(element)
      }
      return tempMenus2
    },
    // 过滤查询条件
    queryMenu (menuName, menus) {
      if (!menuName || !menus.length) {
        // 如果搜索参数空或者路由参数空不处理
        return menus
      }
      let menuList = []
      menus.forEach(menu => {
        // 循环所有菜单
        let tempChildren = []
        let addChildren = false
        if (this.containStr(menu.name, menuName)) {
          // 如果父级菜单包含加载全部子菜单
          menu.name = this.highlightName(menu.name, menuName)
          addChildren = true
        }
        if (menu.children.length) {
          menu.children.forEach(c => {
            // 父菜单或者子菜单包含字符
            if (addChildren || this.containStr(c.name, menuName)) {
              // 替换变量名
              c.name = this.highlightName(c.name, menuName)
              tempChildren.push(c)
            }
          })
        }
        if (tempChildren.length) {
          menu.children = tempChildren
          menuList.push(menu)
        }
      })
      return menuList
    },
    // 是否包含字符串
    containStr (str, str2) {
      if (!str || !str2) {
        return false
      }
      return str.indexOf(str2) !== -1
    },
    highlightName (name, str) {
      return name.replace(str, `<span style="color: #EE6723; ">${str}</span>`)
    },
    // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
    gotoRouteHandle (menu) {
      // console.log('menu', menu)
      this.$emit('click', menu)
    }
  }
}
</script>

<style scoped lang="scss">
.widtgAuto {
  /* width: calc(100vw - 35px); */
  /* width: calc(calc(100vw - 40px) / 6); */
}
.fr {
  position: relative;
  top: -8px;
  color: #000;
}
.navbar-menu-body {
  max-height: calc(100vh - 150px);
}
.navbar-menu-search {
  margin: 10px 15px 5px 15px;
  text-align: center;
}
.aa {
  /* min-width: 185px; */
  width: calc(calc(100vw - 205px) / 6);
  min-width: 150px;
  padding-bottom: 20px;
}
.a {
  height: 42px;
  line-height: 42px;
  cursor: default;
  /* margin-bottom: 10px; */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.no-data {
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: #cccccc;
  text-align: center;
}
.navbar-menu {
  color: #000000;
  /* font-size: 12px; */
  /* line-height: 35px; */
  margin: 30px;
}
.navbar-menu-title {
  float: left;
  color: #333;
  font-size: 13px;
  font-weight: 600;
  line-height: 42px;
}
.navbar-menu-item > li > .el-button {
  text-decoration: none;
  font-weight: normal;
  line-height: 24px;
  font-size: 13px;
  color: #333;
  margin: 7px auto auto auto;
  padding: 0px 0px;
}
.navbar-menu-item > .icon-svg:hover {
  color: #d9422f;
}
.navbar-menu-item > li > .el-button:hover {
  color: #d9422f;
}
.el-row > .el-col > .aa > ul {
  padding-inline-start: 0px;
}
</style>
